{# We include here templates that are used to generate custom elements #}

<template id="hedy_select">
    <div class="dropdown dropdown-green rounded relative">
        <button type="button" class="toggle-button font-semibold rounded inline-flex justify-between
                            appearance-none w-full border border-gray-200 text-gray-700 p-2 rounded"
            onclick="hedyApp.toggleDropdown(event)">
            <span class="label"></span>
            <svg class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
            </svg>
        </button>
        <div class="dropdown-menu overflow-auto dropdown-blue z-30 mt-2 w-full max-h-96" id="classes_dropdown"
            style="display: none; width: 100%;" _="on mutation of @style
                                set arrow to the previous <svg/>
                                if *display == 'none'
                                    remove .rotate-180 from arrow
                                else if not arrow.classList.contains('rotate-180')
                                    add .rotate-180 to arrow
                                end">
        </div>
    </div>
</template>

<template id="warning_template">
    <div data-cy="test_warning_message"
        class="flex-0 z-20 mt-4 bg-yellow-100 border-t-4 border-yellow-500 rounded-b text-yellow-900 px-4 py-3 shadow-md relative"
        role="alert">
        <p class="close-dialog" data-cy="close_warning"><i class="fa-solid fa-xmark"></i></p>
        <div class="flex">
            <div class="py-1">
                <div id="warningbox_icon">
                    <svg class="fill-current h-6 w-6 text-yellow-500 ltr:mr-4 rtl:ml-4"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path
                            d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
                    </svg>
                </div>
            </div>
            <div>
                <p class="details text-sm"></p>
            </div>
        </div>
    </div>
</template>

<template id="user_list_template">
    <li class='relative border-2 rounded-lg border-green-300 p-2 px-5 mx-2 mb-2 shadow bg-gray-200'>    
        <p class="details text-sm"></p>
        <span class='close cursor-pointer absolute top-0.5 right-0.5 text-gray-600 hover:text-red-400 fa-regular fa-circle-xmark'></span>
        <input type="hidden" value="{{ username }}" name="usernames">
    </li>
</template>